<template>
  <div class="container">
	<div id="myChart" style="width:100%; height: 500px"></div>
  </div>
  
</template>
<script>
import { FriLink } from '@/model/friLink'

import * as echarts from 'echarts';

export default {
  data() {
    return {
      names: [],
      pos_num: [],
    }
  },
  
  name: "chart",
  props: {
    //chartId: "aaaaa",
    xData: Array,
    // itemData: Array,
    series: Array,
    legend: Object
  },
  
  watch: {

  },
  mounted() {
    this.drawLine();

  },
  
  methods: {
	redraw(){
		this.drawLine()
    },
	// 渲染折线图
	async drawLine () {
	
	    const list = await FriLink.posCompanyCt()
			console.info(11111)
			console.info(list)
			console.info(11111)
			
		for (let i = 0; i < list.length; ++i) {
			  this.names.push(list[i].name);
			  this.pos_num.push(list[i].pos_num);
		}
		  
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('myChart'));
		
		var option=
		{
		
			  title: {
				text: '企业岗位总数'
			  },
			  label: { //显示数字
					show: true,
					position: "top",
					textStyle: {
						color: "#666"
					},
					formatter:function(params){
						  //console.info(params);
						  return params.data[1];
					}
			 },
			  xAxis: {
				type: 'category',
				data: this.names
			  },
			  yAxis: {
				type: 'value'
			  },
			  
			  dataZoom: [
				{
				  show: false, // 是否显示滑动条
				  xAxisIndex: 0, // 这里是从X轴的0刻度开始
				  startValue: 0, // 数据窗口范围的起始数值
				  endValue: 10 // 数据窗口范围的结束数值(一次性展示几个)
				}
			  ],
			  
			  series: [
				{
				  //data: [120, 200, 150, 80, 70,],
				  data: this.pos_num,
				  type: 'bar'
				}
			  ]
			  
			  
  
		}
		
		if (this.names.length > 0 && this.pos_num.length > 0) {
		  setInterval(()=>{
			// 每次向后滚动一个，最后一个从头开始
			if (option.dataZoom[0].endValue === this.names.length) {
			  option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值
			  option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值
			} else {
			  option.dataZoom[0].startValue = option.dataZoom[0].startValue + 9; // 数据窗口范围的起始数值
			  option.dataZoom[0].endValue = option.dataZoom[0].endValue + 9; // 数据窗口范围的结束数值
			}
			myChart.setOption(option);
		  }, 2000);
		}
		
		// 绘制图表
		myChart.setOption(option);
	}
  
    
  
  },
}
</script>

<style lang="scss" scoped>

</style>
